<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/X-admin/css/font.css">
    <link rel="stylesheet" href="/X-admin/css/xadmin.css">
    <script type="text/javascript" src="/X-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/X-admin/js/xadmin.js"></script>
    <script src="../../../js/jquery.js"></script>
    <script src="../../../js/wangEditor.min.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-input-inline layui-show-xs-block">
                <select name="cuisine" id="cuisine">
                    <option value="0">全部</option>
                    <!--                    <option>支付宝</option>-->
                    <!--                    <option>微信</option>-->
                    <!--                    <option>货到付款</option>-->
                </select>
            </div>
            <div class="layui-form-item">
                <label for="productName" class="layui-form-label">
                    <span class="x-red">*</span>产品名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="productName" name="productName"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="price" class="layui-form-label">
                    <span class="x-red">*</span>产品价格
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="price" name="price"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>产品图片
                </label>
                <div class="layui-input-inline">
                    <input type="file" id="imgHref">
                    <!--                    <button type="button" class="layui-btn" id="imgHref">-->
                    <!--                    <i class="layui-icon">&#xe67c;</i>上传图片-->
                    <!--                    </button>-->
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="content" class="layui-form-label">
                    <span class="x-red">*</span>产品描述
                </label>
                <div class="layui-input-inline" style="width: 500px">
                    <div id="content"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" onclick="addProduct()" id="add">
                    增加
                </button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    const E = window.wangEditor;
    const editor = new E('#content');
    // 或者 const editor = new E( document.getElementById('div1') )
    const editUrl = '/upload-img';//服务器访问地址
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色//
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'justify',  // 对齐方式
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'undo',  // 撤销
        'redo'  // 重复
    ];
    editor.customConfig.uploadImgShowBase64 = true;  // 使用 base64 保存图片
    editor.customConfig.uploadImgServer = editUrl; // 上传图片到服务器
    editor.customConfig.showLinkImg = false;// 隐藏“网络图片”tab
    //配置属性名称，绑定请求的图片数据
    //controller会用到，可以随便设置，但是一定要与controller一致
    editor.customConfig.uploadFileName = 'wangEditorUrl';
    editor.customConfig.withCredentials = true;
    // 将图片大小限制为 5M
    editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            console.log(result);
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            let url = result.url;
            console.log(url);
            insertImg(url)//回显到富文本里面
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    };

    editor.create();
</script>
<script>

    layui.use(['form', 'layer', 'upload'],
        function () {
            $ = layui.jquery;
            let form = layui.form;
            let layer = layui.layer;


            //执行实例
            // var uploadInst = upload.render({
            //     elem: '#imgHref' //绑定元素
            //     , url: '/upload' //上传接口
            //     , data: {
            //         name: 'aaa',
            //         price: '11'
            //     }
            //     ,multiple: true
            //     ,auto: false
            //     ,bindAction:"#add"
            //     , done: function (res) {
            //         console.log(res);
            //     }
            //     , error: function () {
            //         //请求异常回调
            //     }
            // });
            // console.log(uploadInst);
            // cuisine.render(
            //
            // )
            $.ajax({
                url: '/back/cuisine/get',
                data: '',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    data = data.list;
                    let html = '';
                    for (let i = 0; i < data.length; i++) {
                        html += '<option value="' + data[i].id + '"> ' + data[i].name + '</option>';
                    }
                    console.log(html)
                    $("#cuisine").html(html);
                    form.render();
                }
            })


        });

    function addProduct() {
        var file = $("#imgHref")[0].files[0];
        var fd = new FormData();
        fd.append("name", $("#productName").val());
        fd.append("price", $("#price").val());
        fd.append("cuisine", $("#cuisine").val());
        fd.append("imgHref", file);
        fd.append("content", editor.txt.html());
        console.log(editor.txt.html(), "html");
        console.log(editor.txt.text(), "text");
        let data = myFileAjax("/backFile/product/add", fd, "post");
        // console.log(data);
        if (data.result == 'success') {
            layer.msg('新增成功');
            xadmin.close();

            // 可以对父窗口进行刷新
            xadmin.father_reload();
        }  else {
            layer.msg('新增失败');
        }
        // $.ajax({
        //     url: "/back/product/add",
        //     type: "POST",
        //     data: fd,
        //     processData: false,
        //     contentType: false,
        //     success: function (data) {
        //         // console.log(data);
        //         if (data.result == 'success') {
        //             layer.msg('新增成功');
        //             xadmin.close();
        //
        //             // 可以对父窗口进行刷新
        //             xadmin.father_reload();
        //         } else {
        //             layer.msg('新增失败');
        //         }
        //     }
        // });
    }
</script>

</body>

</html>
<script src="../../../js/cuisine-list.js"></script>